<template>
	<view class="page">

		<view class="page-content ">
			<u-tabs :list="tabs" active-color="#70B52C" :is-scroll="false" :current="tabCur"
				@change="tabsChange"></u-tabs>
			<view class="line"></view>
			<view class="p13 pt15">
				<template v-if="tabCur==5">
					
					<view class="bg-white mb20 bm pb20" v-for="(order,orderIndex) in dataList" :key="orderIndex"
						@click="toRefundInfo(order)">
						<view class="u-flex  mb15" style="align-items: stretch;">
							<image :src="order.picUrl" style="height: 200rpx;width:200rpx" mode="aspectFit"></image>
							<view class="pl12 u-f1 u-flex  u-f-jsb" style="flex-direction: column;">
								<view class="fz14 u-flex u-f-jsb" style="width: 100%;">
									{{order.spuName}}
									<span style="color: #999;">
										退款
									</span>
								</view>
								<view style="width: 100%;">
									退款：
									<span class="fz16 u-font-bold" v-if="order.refundAmount">￥{{order.refundAmount}}</span>
								</view>
<!-- 								<view class=" u-flex u-f-jsb fz12 c9" style="width: 100%;">
									规格：{{order.skuName}}<span></span></view>
								<view class="fz14 u-flex u-f-jsb u-font-bold" style="width: 100%;">
									￥{{order.price}}
									<span>x{{order.count}}</span>
								</view> -->
					
					
							</view>
						</view>
					
						<view class="fz14 u-flex u-f-jsb ">
							<view class="fz16 u-font-bold">
								{{refundStatus[order.status]}}
							</view>
							<view class="u-flex">
								<view class="btn" @click.stop="pay(order)" v-if="order.status==0">立即支付</view>
								<view class="btn btn1" v-if="order.status!=0">查看详情</view>
							</view>
						</view>
					</view>
				</template>
				<template v-else>
					<view class="bg-white mb20 bm pb20" v-for="(order,orderIndex) in dataList" :key="orderIndex"
						@click="toInfo(order)">
						<view class="u-flex  mb15" style="align-items: stretch;" v-for="(item,index) in order.items"
							:key="index">
							<image :src="item.picUrl" style="height: 200rpx;width: 200rpx;" mode="aspectFit"></image>
							<view class="pl12 u-f1 u-flex  u-f-jsb" style="flex-direction: column;">
								<view class="fz14 u-flex u-f-jsb" style="width: 100%;">
									{{item.spuName}}
									<span style="color: #FF563B;" v-if="index==0">
										<text class="f24 activeColor" v-if="order.status==0">待付款</text>
										<text class="f24 activeColor" v-if="order.status==10">
											{{order.boxDeliverId?'已确认发货':'待发货'}}
										</text>
										<text class="f24 activeColor" v-if="order.status==20">待收货</text>
										<text class="f24" v-if="order.status==30">已完成</text>
									</span>
								</view>
								<view class=" u-flex u-f-jsb fz12 c9" style="width: 100%;">
									规格：{{item.skuName}}<span></span></view>
								<view class="fz14 u-flex u-f-jsb u-font-bold" style="width: 100%;">
									￥{{item.price}}
									<span>x{{item.count}}</span>
								</view>


							</view>
						</view>

						<view class="fz14 u-flex u-f-jsb ">
							<view class="u-flex fz13">
								实付款：
								<span class="fz16 u-font-bold" v-if="order.payPrice">￥{{order.payPrice}}</span>
								<span class="fz16 u-font-bold"
									v-if="order.walletAmount">{{order.walletAmount}}购物金</span>

								<span v-if="order.exchangePoint">{{order.exchangePoint || 0}}积分</span>
							</view>
							<view class="u-flex">
								<view class="btn" @click.stop="pay(order)" v-if="order.status==0">立即支付</view>
								<view class="btn btn1" v-if="order.status!=0">查看详情</view>
								<view class="btn btn1" v-if="order.status==20" @click.stop="toReceive(order)">确认收货</view>
							</view>
						</view>


					</view>
				</template>
				<view class="mt20">

					<u-loadmore :status="loadStatus" v-if="dataList.length>0" />
				</view>
				<view class="order-none u-flex u-f-justify fz16 c9 p50" v-if="dataList.length<=0">
					暂无订单~
				</view>
			</view>
		</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabCur: 0,
				tabs: [{
						name: "全部",
						count: 0,
						value: '',
					},
					{
						name: "待付款",
						count: 0,
						value: 0,
					},
					{
						name: "待发货",
						count: 0,
						value: 10,
					},
					{
						name: "待收货",
						count: 0,
						value: 20,
					},
					{
						name: "已完成",
						count: 0,
						value: 30,
					},
					{
						name: "售后订单",
						value: 90,
					}
				],
				// 10：申请中；20：卖家通过；30：待卖家收货；40：等待平台退款；50：完成；61：买家取消售后；62：卖家拒绝；63：卖家拒绝收货
				refundStatus:{
					10:'申请中',
					20:'卖家通过',
					30:'待卖家收货',
					40:'等待平台退款',
					50:'完成',
					61:'买家取消售后',
					62:'卖家拒绝',
					63:'卖家拒绝收货',
				},
				loadStatus: 'more',
				scrollHeight: 300,
				dataList: [],
				page: 1,
			}
		},
		onLoad(e) {
			if (e.tab) {
				this.tabCur = e.tab
			}
		},
		onShow() {
			this.$nextTick(() => {
				this.initData()
			})
		},
		// 页面下拉到底部触发
		onReachBottom() {
			console.log(this.loadStatus,11111)
			if (this.loadStatus == 'more') {
				this.getList()
			}
		},
		methods: {
			toInfo(item) {
				uni.navigateTo({
					url: '/pages/user/order/info?id=' + item.id
				})
			},
			toRefundInfo(item) {
				uni.navigateTo({
					url: '/pages/user/order/refund-info?id=' + item.id
				})
			},
			toReceive(item) {
				this.$common.modelShow('提示', '确认已收到货吗?', () => {
					this.$api.orderReceive({
						id: item.id
					}, res => {
						if (res.code == 200) {

							this.$common.successToShow('确认成功', ress => {
								this.initData()
							})
						} else {
							this.$common.errorToShow(res.msg)
						}
					})
				});
			},
			del: function(item) { //删除



				this.$common.modelShow('提示', '确认取消该订单吗?', () => {

					this.$api.orderCancel({
						id: item.id
					}, res => {
						if (res.code == 200) {

							this.$common.successToShow('取消成功', ress => {
								item.status = 40
								this.initData()
							})
						} else {
							this.$common.errorToShow(res.msg)
						}
					})
				});
			},
			pay: function(item) { //立即付款

				this.$api.orderPay({
					id: item.payOrderId,
					returnUrl: ''
				}, res => {
					if (res.code == 200) {




						let info = JSON.parse(res.data.displayContent)
						// 唤起微信支付。
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: info.timeStamp,
							nonceStr: info.nonceStr,
							package: info.packageValue,
							signType: info.paySign,
							paySign: info.paySign,
							success: (res) => {

								this.$common.successToShow('支付成功', ress => {
									this.initData()
								})
							}
						});
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			},
			tabsChange: function(index) {
				this.tabCur = index;

				this.page = 1;
				this.dataList = [];
				this.initData();
			},
			initData() {
				this.page = 1
				this.dataList = [];
				this.getList()
			},
			getList: function() {
				//抽盒列表
				let data = {
					pageNo: this.page,
					status: this.tabs[this.tabCur].value,
					limit: this.limit,
				}
				this.loadStatus = 'loading'
				let api = 'orderList'
				if (this.tabCur == 5) {
					api = 'afterSalePage'
				}
				this.$api[api](data, res => {
					if (res.code == 200) {
						let _list = res.data.list
						this.dataList = [...this.dataList, ..._list]
						this.isEmpty = (this.dataList.length == 0 ? true : false);
						// 判断所有数据是否请求完毕
						if (res.data.total > this.dataList.length) {
							this.page++
							this.loadStatus = 'more'
						} else {
							this.loadStatus = 'nomore'
						}
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			},
		},

	}
</script>

<style lang="scss" scoped>
	.btn {

		width: 184rpx;
		height: 64rpx;
		text-align: center;
		color: #fff;
		line-height: 64rpx;
		background: #70B52C;
		border-radius: 16rpx;
	}

	.btn1 {

		width: 184rpx;
		height: 64rpx;
		text-align: center;
		color: #70B52C;
		line-height: 64rpx;
		background: #fff;
		border: 1px solid #70B52C;
		border-radius: 16rpx;
	}

	.line {
		width: 750rpx;
		height: 4rpx;
		position: relative;
		top: -4rpx;
		background: #F6F9F9;
		border-radius: 0px 0px 0px 0px;
	}

	.status1 {
		color: #E54440;
	}

	.status2 {
		color: #39959B;
	}

	.status3 {
		color: #333;
	}
</style>